<template>
  <div ref="chartsDom" style="width: 100%; height: 100%"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import zhongguo from "./china.json"
import { geoCoordMap } from "./utils.js";
import API from '@/common/api'
import { ref, nextTick, defineProps, watchEffect } from "vue"
const props = defineProps({
  time: {
    type: String,
    default: ''
  },
  companyLabFlag: {
    type: Number,
    default: 0
  },
})
const chartsDom = ref(null)
const charts = ref(null)
const MapData = ref([])
const lengList = ref([])
const LabAddress = ref([])
const convertedData = ref([])
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    let name = data[i].name
    var geoCoord = geoCoordMap[name];
    if (geoCoord) {
      res.push({
        name: name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};

const initCharts = () => {
  charts.value = echarts.init(chartsDom.value)
  const markData = LabAddress.value

  const option = {
    // 添加 legend 组件

    graphic: [{
      type: 'group',// 组（可以包含图形、文字、图片）
      left: 0,
      bottom: 20,
      children: lengList.value
    }],
    // 提示浮窗样式
    tooltip: {
      //trigger: 'item',
      //formatter: '{a}<br />{b}: {c}<br />',
      // 提示框背景颜色
      backgroundColor: 'rgba(50, 50, 50, 0.4)', // 黑色背景，70% 不透明度
      // 提示框文字颜色
      // 提示框文字样式
      textStyle: {
        // 文字颜色
        color: '#ffffff', // 白色文字
        // 其他样式，如字体大小
        fontSize: 14
      },

      formatter: function (params) {
        let temp = params.data.name + '<br />'
        for (let index = 0; index < params.data.value.length; index++) {
          const element = params.data.value[index];
          if (element.CompanyName && element.TotalCount > 0) {
            temp += `${element.CompanyName}（${element.TotalCount}）` + '<br />'
          }
        }
        return temp
      },
    },
    // tooltip: {
    //   trigger: "item",
    //   backgroundColor: "rgba(0,0,0,0)",
    //   borderColor: "rgba(0,0,0,0)",
    //   extraCssText: "box-shadow: 0 0 0 rgba(0, 0, 0, 0);",
    //   zIndex: 400,
    //   formatter: function (params) {
    //     let temp = ''
    //     for (let index = 0; index < params.data.value.length; index++) {
    //       const element = params.data.value[index];
    //       if (element.CompanyName) {
    //         temp += `<div style="font-size: 12px;color:#ffffff;padding:4px 10px 0">${element.CompanyName}（${element.TotalCount}）</div>`
    //       }
    //     }
    //     if (temp) {
    //       const tip = `
    //           <div style="padding:10px 0;background: linear-gradient(360deg, #0A5EF3 0%, rgba(20,10,125,0.34) 100%);border: 1px solid #FFFFFF;">
    //             <div style="font-size: 14px;color:#ffffff;text-align:center;border-bottom:1px solid #CD9E16;padding-bottom:4px">
    //               ${params.name}
    //             </div>
    //             ${temp}
    //           </div>
    //           `
    //       // 由于是写在最外层的所以需要判断一下当前鼠标是在地图上还是散点上悬浮
    //       return tip
    //     } else {
    //       return `
    //           <div style="padding:10px 0;background: linear-gradient(360deg, #0A5EF3 0%, rgba(20,10,125,0.34) 100%);border: 1px solid #FFFFFF;">
    //             <div style="font-size: 14px;color:#ffffff;text-align:center;padding:4px 10px">
    //               ${params.name}
    //             </div>
    //           </div>
    //           `
    //     }
    //   },
    // },
    series: [
      // {
      //   name: '辖区内数量',
      //   type: 'scatter',
      //   coordinateSystem: 'geo',
      //   data: convertedData.value[0],
      //   symbolSize: 10,
      //   label: {
      //     normal: {
      //       formatter: '{b}',
      //       position: 'right',
      //       show: false
      //     },
      //     emphasis: {
      //       show: true
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: '#ddb926'
      //     }
      //   },
      //   tooltip: {
      //     //trigger: 'item',
      //     //formatter: '{a}<br />{b}: {c}<br />',
      //     // 提示框背景颜色
      //     backgroundColor: 'rgba(50, 50, 50, 0.4)', // 黑色背景，70% 不透明度
      //     // 提示框文字颜色
      //     // 提示框文字样式
      //     textStyle: {
      //       // 文字颜色
      //       color: '#ffffff', // 白色文字
      //       // 其他样式，如字体大小
      //       fontSize: 14
      //     },

      //     formatter: function (params) {
      //       var showHtm = params.seriesName + '<br />' + params.name + '辖区内数量:' + params.value[2];
      //       //var showHtm = params.name + params.seriesName + ':' + params.value[2] + '<br />';
      //       return showHtm;
      //     },
      //   },
      // },
      // {
      //   name: 'Top 5',
      //   type: 'effectScatter',
      //   coordinateSystem: 'geo',
      //   zlevel: 4,
      //   symbolSize: 10,
      //   rippleEffect: {
      //     scale: 4,
      //     brushType: 'stroke'
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: 'red',
      //       shadowBlur: 10,
      //       shadowColor: '#333'
      //     }
      //   },
      //   data: convertedData.value[1],
      //   tooltip: {
      //     //trigger: 'item',
      //     //formatter: '{a}<br />{b}: {c}<br />',
      //     // 提示框背景颜色
      //     backgroundColor: 'rgba(50, 50, 50, 0.4)', // 黑色背景，70% 不透明度
      //     // 提示框文字颜色
      //     // 提示框文字样式
      //     textStyle: {
      //       // 文字颜色
      //       color: '#ffffff', // 白色文字
      //       // 其他样式，如字体大小
      //       fontSize: 14
      //     },

      //     formatter: function (params,) {
      //       var showHtm = params.seriesName + '<br />' + params.name + '辖区内数量:' + params.value[2];
      //       //var showHtm = params.name + params.seriesName + ':' + params.value[2] + '<br />';
      //       return showHtm;
      //     },
      //   },
      // },
      // 添加标记系列
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        data: markData.map(item => ({
          name: item.name,
          color: item.color,
          value: item.coord.concat(4), // 标记大小
        })),
        symbolSize: 4, // 标记大小
        itemStyle: {
          color: function (arg) {
            return arg.data.color
          }, // 标记颜色
        },
        emphasis: {
          label: {
            show: true,
            formatter: "{b}",
          },
        },
      },
      {
        type: "map",
        geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
        data: MapData.value,
      },
    ],
    //图的相对位置
    grid: {
      right: '5%',
      top: '20%',
      bottom: '10%',
      width: '20%'
    },
    //右部柱状图的显示范围
    xAxis: {
      'type': 'log',
      // min: 0,
      // max: 300000,
      show: true
    },
    yAxis: [{
      inverse: true,
      offset: '2',
      'type': 'category',
      data: '',
      nameTextStyle: {
        color: '#fff'
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        //rotate:45,
        textStyle: {
          fontSize: 14,
          color: '#000000',
        },
        interval: 0
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#333'
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#333'
        }
      },
    }],
    // 地图配置
    geo: {
      map: "china",
      roam: true, //是否允许缩放
      label: {
        // 通常状态下的样式
        normal: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        // 鼠标放上去的样式
        emphasis: {
          textStyle: {
            color: "#fff",
          },
        },
      },
      zoom: 1.25,
      // 地图区域的样式设置
      itemStyle: {
        normal: {
          borderColor: "rgba(147, 235, 248, 1)",
          borderWidth: 1,
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          shadowColor: "rgba(128, 217, 248, 1)",
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#389BB7",
          borderWidth: 0,
        },
      },
    },
  }
  // 地图注册，第一个参数的名字必须和option.geo.map一致
  echarts.registerMap("china", zhongguo)
  charts.value.setOption(option)
  charts.value.on("click", (param) => {
    //地图省份点击事件
    console.log(param, param.name)
  })
}

const colorList = {
  中国航油: "#E44954",
  中国石化: "#E3BD81",
  中国石油: "#0A4FE8",
  其他: "#86F280",
}
function findClosestColor(text) {
  // 获取所有颜色键的数组
  const keys = Object.keys(colorList);

  // 创建一个匹配函数，用于计算字符串之间的匹配程度
  const matchScore = (key) => {
    if (!key) {
      return ''
    }
    let score = 0;
    for (let i = 0; i < key.length && i < text.length; i++) {
      if (key[i] === text[i]) {
        score++;
      }
    }
    return score;
  };

  // 使用 reduce 函数找到匹配度最高的颜色
  const closestColor = keys.reduce((closest, key) => {
    // 如果当前键的匹配度高于之前的最高匹配度，或者它是第一个键
    if (matchScore(key) > matchScore(closest.key) || !closest.key) {
      return { key, score: matchScore(key) };
    }
    return closest;
  }, { key: null, score: 0 }).key;

  // 返回匹配度最高的颜色的值
  return colorList[closestColor] || '#ffffff'; // 如果没有找到匹配的颜色，则返回黑色作为默认值
}

const loadMap = async () => {
  const data = localStorage.getItem('info')
  if (data) {
    const json = JSON.parse(data)
    const params = {
      "TestMainId": props.time,  //登录返回的，选2023，就把对应的该字段传进来
      "LabId": json.Id, //登录返回的
      "LabType": json.LabType, //登录返回的
      "LabFlag": props.companyLabFlag, //传0 表示本化验室，传 2表示地区公司 根据点的那个类型的领导驾驶舱决定的
      "LabName": json.ShortName //登录返回的
    }
    let res: any = null
    if (props.companyLabFlag === 1) {
      res = await API.GetMapDataChart(params)
    } else {
      res = await API.GetLocalMapDataChart(params)
    }
    if (res.Tag) {
      // 初始化一个空对象来存储统计结果
      const stats = {};
      const data = res.Data.MapData.reduce((acc, curr) => {
        // 找到“其他”公司的TotalCount
        // 使用reduce函数来计算TotalCount的总和
        var otherTotalCount = curr.CompanyCount.reduce(function (accumulator, currentValue) {
          return accumulator + currentValue.TotalCount;
        }, 0); // 第二个参数0是累加器的初始值
        // 将省份名称和总数添加到结果数组中
        acc.push({ name: curr.ProvinceName, value: otherTotalCount });
        return acc;
      }, []);

      convertedData.value = [
        convertData(data),
        convertData(data.sort(function (a, b) {
          return b.value - a.value;
        }).slice(0, 6))
      ];

      // 遍历arr数组
      res.Data.MapData.forEach(item => {
        // 遍历item中的CompanyCount数组
        item.CompanyCount.forEach(company => {
          // 对于每个公司名称，如果它已经在stats中存在，则累加TotalCount
          // 如果不存在，则初始化一个TotalCount为0的对象
          if (company.CompanyName in stats) {
            stats[company.CompanyName] += company.TotalCount;
          } else {
            stats[company.CompanyName] = company.TotalCount;
          }
        });
      });

      // 将统计结果转换为所需的数组格式
      const list = Object.entries(stats).map(([CompanyName, TotalCount]) => ({
        CompanyName,
        TotalCount
      }));

      list.forEach((item, index) => {
        const list = [{
          type: "rect",
          left: 0,
          top: index * 30,
          z: 100,
          shape: { width: 15, height: 15 },
          style: { fill: findClosestColor(item.CompanyName) },
        },
        {
          type: "text",
          z: 100,
          left: 25,
          top: index * 30,
          style: {
            fill: '#ffffff',
            text: item.CompanyName + " - " + item.TotalCount,
            font: '14px Microsoft YaHei'
          }
        }]
        lengList.value = lengList.value.concat(list)
      })

      // 添加 legend 组件
      MapData.value = res.Data.MapData.map((e) => {
        const item = { name: e.ProvinceName, selected: false, value: e.CompanyCount }
        return item
      })
      LabAddress.value = res.Data.LabAddress.map((e) => {
        const item = { name: e.LabName, color: findClosestColor(e.CompanyName), coord: [e.Longitude, e.Latitude] }
        return item
      })

      initCharts()
    } else {
      initCharts()
    }
  }
}
watchEffect(() => {
  console.log(props.time);
  lengList.value = []
  // charts.value.resize();
  nextTick(() => {
    if (chartsDom.value) {
      loadMap()
    }
  })
})
</script>
<style lang="scss" scoped>
::v-deep(canvas) {
  margin-top: 4px !important;
}
</style>
